<template>
  <view style="width: 100%; min-height: 100vh; background-color: #F8F8F8;" v-if="show_flag">
    <view style="width: 100%; padding: 20upx 20upx 0 20upx;">
      <view class="flex justify-between bg-white tutorials-box" v-for="(item,index) in page_main_data" :key="index"
            @click="handleToTutorialsDetail(item.id)">
        <image :src="item.img_arr[0]" style="width: 286upx; height: 198upx; border-radius: 10upx;" mode="aspectFit"></image>
        <view class="flex flex-direction" style="width: 50%;">
          <view class="text-hidden" style="font-size: 30upx; color: #000000; font-weight: bold; margin-top: 10upx;">
            {{item.name}}
          </view>
          <view class="flex align-center" style="font-size: 20upx; color: #C5C5C5; margin: 30upx 0;">
            <image src="/static/icon/tutorials/gongkaobaike@2x.png" style="width: 30upx; height: 28upx; margin-right: 10upx;"></image>
            <view>{{item.video_tutorial_num}}</view>
            <view style="width: 2upx; height: 16upx; background-color: #C5C5C5; margin: 0 24upx;"></view>
            <image src="/static/icon/tutorials/kecheng@2x.png" style="width: 24upx; height: 28upx; margin-right: 10upx;"></image>
            <view>{{item.buy_num}}人在学</view>
          </view>
          <view class="flex align-center justify-between">
            <view style="font-size: 28upx; color: #E52718; font-weight: bold;">¥{{item.sale_price}}</view>
            <view class="flex align-center">
              <image :src="item.user && item.user.avatar" mode="aspectFill" style="width: 44upx; height: 44upx; border-radius: 50%;"></image>
              <view class="text-hidden" style="width: 120upx; font-size: 24upx; color: #999999; margin-left: 10upx;">
                {{item.user && item.user.nick_name}}
              </view>
            </view>
          </view>
        </view>
      </view>
      <view v-if="page_main_data.length == 0" class="justify-center align-center"
            style="width: 100%; padding: 50% 0; flex-direction: column; text-align: center;">
        <image src="/static/image/no_content@2x.png" style="width: 264upx; height: 264upx;"></image>
        <view class="flex justify-center" style="font-size: 24upx; color: #999999;">暂无内容</view>
      </view>
    </view>
    <view>
      <view class="flex align-center justify-center"
            v-if="page_main_data.length >= 15"
            style="width: 100%; height: 102upx; padding: 0 50upx;">
        <view style="width: 30%; height: 2upx; background-color: #F1F1F1;"></view>
        <view style="width: 40%; text-align: center;">
          <view v-if="!bottom_flag" style="color: #CACACA; font-size: 24upx; margin: 0 40upx;">到底了</view>
          <view v-else class="action">
            <view class="cu-load" :class="!is_load?'loading':'over'" style="font-size: 28upx; color: #CACACA;"></view>
          </view>
        </view>
        <view style="width: 30%; height: 2upx; background-color: #F1F1F1;"></view>
      </view>
    </view>
  </view>
</template>

<script>
import {course_getListByCon} from "api/tutorials/tutorials"
export default {
  data(){
    return {
      page_main_data: [], //初始化数据
      bottom_flag: true, //触底标识
      page: 1, //分页
      show_flag: false,
      is_load: true, //加载
    }
  },
  methods:{
    pageInit(page = 1, type){
      this.page = page;
      let user_info = uni.getStorageSync('user_info')
      course_getListByCon({user_id: user_info.id || '0', page}).then(res=>{
        if(type){
          this.page_main_data = [];
        }
        let temp_data = res.data.data;
        if(temp_data.length == 0){
          this.bottom_flag = false;
        }else {
          temp_data.forEach(item=>{
            this.page_main_data.push(item);
          })
        }
        this.show_flag = true;
      })
    },
    //去教程详情
    handleToTutorialsDetail(course_id){
      this.$uniNavigateTo({
        url: '/pages/tutorials/articleDetail/articleDetail',
        query: {
          course_id
        }
      })
    },
  },
  onShow(){
    this.pageInit(1,1);
  },
  //上拉加载
  onReachBottom() {
    if (this.bottom_flag) {
      this.is_load = false;
      this.page += 1;
      this.pageInit(this.page);
    }
    console.log('上拉加载')
  },
  //下拉刷新
  onPullDownRefresh() {
    this.page = 1;
    this.pageInit(1,1);
    this.bottom_flag = true;
    uni.stopPullDownRefresh();
  }
}
</script>

<style lang="less" scoped>
.tutorials-box {
  height: 238upx;
  background-color: white;
  border-radius: 10upx;
  padding: 20upx;
  margin-bottom: 20upx;
}
</style>
